<template>
  <div>
    <h1>vue3得生命周期</h1>
    <h2>求和:{{sum}}</h2>
    <button @click="sum++">+</button>
    
  </div>
</template>

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted}from 'vue'
export default {
  setup () {
    let sum = ref(0)
    // #regin
    // #endregin

    // 组合式API去使用生命周期
    onBeforeMount(()=>{
    console.log('beforemount')
    })
    onMounted(()=>{
      console.log('mounted')
    })
    onBeforeUpdate(()=>{
      console.log('beofreUpdate')
    })
    onUpdated(()=>{
      console.log('updated')
    })
    onBeforeUnmount(()=>{
      console.log('beforedistory')
    })
    onUnmounted(()=>{
      console.log('dsitoried')
    })
    return {
      sum
    }
  }
}
</script>

<style lang="less" scoped>

</style>